<template>
  <div class="main">
    <govheader
      title="化工产业大脑 · 产业链图谱"
      @zfNameflagChange="zfNameflagChange"
    ></govheader>
    <govnavigation></govnavigation>
    <div style="position: relative;">
        <div class="btnBox">
            <div :class="active === 0 ? 'selectBtn' : ''" @click="selectBtn(0)">产业链地图</div>
            <div :class="active === 1 ? 'selectBtn' : ''" @click="selectBtn(1)">产业链图谱</div>
        </div>
          <zfIndustrialChainMapTwo1 v-if="active === 0"></zfIndustrialChainMapTwo1>
          <zfIndustrialChainMapTwo2 v-if="active === 1"></zfIndustrialChainMapTwo2>

    </div>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import govheader from '@/components/govheader2'
import govnavigation from '@/components/govnavigation2'
import zfIndustrialChainMapTwo2 from './components/zfIndustrialChainMapTwo2'
import zfIndustrialChainMapTwo1 from './components/zfIndustrialChainMapTwo1'
export default {
  name: 'zfIndustrialChainMapTwo',
  components: { govheader, govnavigation, zfIndustrialChainMapTwo2, zfIndustrialChainMapTwo1 },
  data () {
    return {
      zfNameflag: true,
      active: 0
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: '20',
              authCode: res.auth_code
            }
            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log('res2:', res)
                localStorage.setItem('buriedPointInformation',JSON.stringify(res.data))
                this.$store.commit('zfName', res.data.lastName)
                if (res.code !== 0) {
                  this.zfNameflag = false
                }
              })
              .catch(() => {
                this.zfNameflag = false
              })
          }
        })
        .catch(() => {
          this.zfNameflag = false
        })
    }
  },
  // 调用
  mounted () {

  },
  methods: {
    zfNameflagChange (val) {
      this.zfNameflag = val
    },
    selectBtn (val) {
      this.active = val
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  background-size: 100% 100%;
  background: #041565;
}
.btnBox{
    width: 400px;
    overflow: hidden;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    margin-left: -200px;
    z-index: 100;
    >div{
        width: 180px;
        height: 50px;
        line-height: 50px;
        color: #ADE1FF;
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        float: left;
        margin: 10px;
        cursor: pointer;
        background-image: url('../../../../assets/img/industry/常规@2x.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .selectBtn{
        background-image: url('../../../../assets/img/industry/点击@2x.png');
    }
}
</style>
